<tr class="table-items-row" [class.expanded]="expanded">
    <td class="cell-label2">
        <span class="badge rounded-pill badge-{{ event | sqxSimulatedRuleEventStatus | sqxRuleClass }}">
            {{ event | sqxSimulatedRuleEventStatus }}
        </span>
    </td>

    <td class="cell-40">
        <span class="truncate">{{ event.eventName }}</span>
    </td>

    <td class="cell-40">
        <small class="truncate">{{ event.skipReasons | sqxJoin }}</small>
    </td>

    <td class="cell-actions">
        <button class="btn btn-outline-secondary btn-expand" [class.expanded]="expanded" (click)="expandedChange.emit()" type="button">
            <span class="hidden">{{ "common.settings" | sqxTranslate }}</span> <i class="icon-settings"></i>
        </button>
    </td>
</tr>

@if (expanded) {
    <tr>
        <td class="details" colspan="4">
            <div class="event-header event-section">
                <h4>{{ "common.details" | sqxTranslate }}</h4>
            </div>

            <div class="event-dump event-section">
                @if (event.event) {
                    <sqx-history-step isExpandable="true">
                        <ng-container summary>
                            <div class="col text-sm">
                                {{ "rules.simulation.eventQueried" | sqxTranslate }}
                            </div>
                        </ng-container>
                        <ng-container details>
                            <sqx-code-editor disabled="true" height="auto" maxLines="20" [ngModel]="event.event" valueMode="Json" wordWrap="false" />
                        </ng-container>
                    </sqx-history-step>

                    <sqx-rule-transition
                        [errors]="errorsAfterEvent"
                        [event]="event"
                        [isLast]="!event.enrichedEvent"
                        text="i18n:rules.simulation.eventTriggerChecked" />

                    @if (event.enrichedEvent) {
                        <sqx-history-step isExpandable="true">
                            <ng-container summary>
                                <div class="col text-sm">
                                    {{ "rules.simulation.eventEnriched" | sqxTranslate }}
                                </div>
                            </ng-container>
                            <ng-container details>
                                <sqx-code-editor
                                    disabled="true"
                                    height="auto"
                                    maxLines="20"
                                    [ngModel]="event.enrichedEvent"
                                    valueMode="Json"
                                    wordWrap="false" />
                            </ng-container>
                        </sqx-history-step>

                        <sqx-rule-transition
                            [errors]="errorsAfterEnrichedEvent"
                            [event]="event"
                            [isLast]="!event.flowState"
                            text="i18n:rules.simulation.eventConditionEvaluated" />

                        @if (event.flowState) {
                            <sqx-state-details [availableSteps]="availableSteps" showEvent="false" [state]="event.flowState" [branchItems]="branchItems" />
                        }
                    }
                }
            </div>
        </td>
    </tr>
}

<tr class="spacer"></tr>
